<!-- 环形图 -->
<template>
  <div>
    <div>【知识库引用】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'

  const props = defineProps({
    data: {
      typeof: Object,
      required: true,
    }
  })

  // 1. 初始化 echarts 实例
  let mChart = null
  const target = ref(null)

  onMounted(() => {
    mChart = echarts.init(target.value)
    renderChart()
  })

  const getSeriesData = () => {
    const series = []
    props.data.forEach((item, index) => {
      // 上层
      series.push({
        name: item.keyString,
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
        center: ['55%', '55%'],
        label: {
          show: false,
        },
        data: [
          {
            value: item.number,
            name: item.keyString
          }, {
            value: 50,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }
        ]
      })
      // 底层
      series.push({
        name: item.keyString,
        type: 'pie',
        silent: true,
        z: 1,
        clockWise: false,
        hoverAnimation: false,
        radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
        center: ['55%', '55%'],
        label: {
          show: false,
        },
        data: [
          {
            value: 7.5,
            itemStyle: {
              color: 'rgba(3,31,62)',
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            hoverAnimation: false
          }, {
            value: 2.5,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            hoverAnimation: false
          }
        ]
      })
    })
    return series
  }

  // 2. 构建 option 配置对象 
  const renderChart = () => {
    var options;
    if (props.data.length == 0 ) {  //暂无数据
        options = {
            title: {
                text: '暂无数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'normal',
                }
              }
              
        }
    } else {
       options = {
        title:{
          text:''
        },
        // 图例配置
        legend: {
          show: true,
          icon: 'circle',
          top: '14%',
          left: '60%',
          data: props.data.map((item) => item.keyString),
          width: -5,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 6,
          textStyle: {
            fontSize: 12,
            lineHeight: 5,
            color: '#ffffff'
          }
        },
        // 提示层
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}<br>引用次数:{c}'

        },
        // Y轴
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          }
        }],
        // X轴
        xAxis: [{
          show: false
        }],
        // 核心配置 
        series: getSeriesData()
      }
    }
    // 3. 通过 实例.setOptions(option)
    mChart.setOption(options,true)
  }

  watch(() => props.data, renderChart)

</script>
<style lang="scss" scoped>

</style>